<nz-row class="variables" [nzGutter]="[10, 10]">
    <nz-col *ngFor="let p of properties" [nzXs]="12" [nzSm]="8" [nzMd]="6" [nzLg]="4" [nzXl]="3" [nzXXl]="2">
        <div class="variable" [ngClass]="{active:actives[p.name]}">
            <nz-statistic [nzTitle]="p.label" [nzValue]="values[p.name] || '-'" [nzSuffix]="p.unit"
                          (click)="actives[p.name]=!actives[p.name]; search()">
            </nz-statistic>
            <nz-switch nzSize="small" [ngModel]="values[p.name]" (ngModelChange)="valueSwitch(p.name, $event)"
                       *ngIf="p.type=='bool' && p.mode=='rw'"></nz-switch>
        </div>
    </nz-col>
</nz-row>

<div class="history">

    <form nz-form [formGroup]="group">
        <div nz-row>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24">窗口时间</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="">
                        <ng-template #addOnAfterTemplate>
                            <nz-select formControlName="winTp" (nzOpenChange)="search()" (change)="search()"
                                       style="width: 60px">
                                <nz-option nzValue="s" nzLabel="秒"></nz-option>
                                <nz-option nzValue="m" nzLabel="分"></nz-option>
                                <nz-option nzValue="h" nzLabel="时"></nz-option>
                            </nz-select>
                        </ng-template>
                        <nz-input-number-group [nzAddOnAfter]="addOnAfterTemplate" style="width: 100%">
                            <nz-input-number [nzStep]="1" (change)="search()"
                                             formControlName="window"></nz-input-number>
                        </nz-input-number-group>
                    </nz-form-control>
                </nz-form-item>
            </div>

            <div nz-col [nzSpan]="16">
                <nz-form-item>
                    <nz-form-label [nzSm]="3" [nzXs]="24">起止时间</nz-form-label>
                    <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="" style="width: 100%">
                        <nz-range-picker nzMode="date" [nzShowTime]="true" (change)="search()"
                                         formControlName="strEnd"></nz-range-picker>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
    </form>

    <echarts class="chart" [options]="option" (chartInit)="chartInit($event)"></echarts>
</div>
